<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" width="700px" append-to-body>
      <el-form ref="form" :model="model" :rules="rules" inline label-width="110px" label-suffix=":" class="form-class" v-loading="loading">
          <el-form-item label="消息内容" prop="message">
              <el-input v-model.trim="model.message" type="textarea" :rows="6" placeholder="请填写您要备注的内容（最多400字符）" :maxlength="400" show-word-limit clearable style="width: 500px"></el-input>
          </el-form-item>
          <el-form-item label="开始时间" prop="date_zone_start">
                <el-date-picker v-model="model.date_zone_start" type="date" placeholder="请选择开始时间" clearable> </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="date_zone_end">
                <el-date-picker v-model="model.date_zone_end" type="date" placeholder="不填择代表至今在用" clearable> </el-date-picker>
            </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button type="primary" :loading="save" :disabled="save" @click="submit">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
      </div>
  </el-dialog>
</template>

<script>
import { editCustomerMessage } from '@/api/customer'
import { parseTime } from '@/utils/quickadmin'
export default {
  name: 'EditDialog',
  props: {
      value: {
          type: Boolean,
          default: false,
          required: true,
      },
      params: {
          type: Object,
          default: () => {},
      },
  },
  data() {
      return {
          loading: false,
          save: false,
          model: {
              id: '',
              message: '',
              date_zone_start: '',
              date_zone_end: ''
          },
          rules: {
            message: [{ required: true, message: '消息内容不能为空', trigger: ['blur', 'change'] }],
            date_zone_start: [{ required: true, message: '开始时间不能为空', trigger: ['blur', 'change'] }],
          },
        //   STATUS_LIST,
          siteList: [],
      }
  },
  computed: {
      title() {
          return `编辑客服消息`
      },
      dialogVisible: {
          get() {
              return this.value
          },
          set(val) {
              this.$emit('input', val)
          },
      },
  },
  watch: {
      params: {
          handler(val) {
              if (val.id) {
                  this.model = Object.assign({}, this.model, val)
              }
          },
          immediate: true,
          deep: true,
      },
  },
  async created() {},
  methods: {
      submit() {
          this.$refs.form.validate(valid => {
              if (!valid) {
                  return
              }

              const params = { ...this.model }
              if(params.date_zone_start) {
                    params.date_zone_start = parseTime(params.date_zone_start, 'y-m-d')
                }
                if(params.date_zone_end) {
                    params.date_zone_end = parseTime(params.date_zone_end, 'y-m-d')
                }
              if (this.save) {
                  return
              }
              this.save = true
              editCustomerMessage(params)
                  .then(res => {
                      this.$message.success(res.msg)
                      this.dialogVisible = false
                      this.$emit('success')
                  })
                  .finally(() => {
                      this.save = false
                  })
          })
      },
      cancel() {
          this.dialogVisible = false
      },
  },
}
</script>

<style>
.form-class.el-form .el-form-item {
  width: 100%;
  margin-right: 0;
}
.form-class.el-form .el-form-item .el-input {
  width: 400px;
}
</style>
